
<template>
    <!-- <el-button @click="exportToPDF">导出为PDF</el-button> -->
    <div class="selectBox">
        <el-button class="bt_in_selectBox" @click="exportTo_j_word">导出为WORD文档</el-button>
        <el-radio-group class="radio_group_in_selectBox" v-model="currentPaper" @change="fetchData">
            <el-radio-button label="A">A 卷</el-radio-button>
            <el-radio-button label="B">B 卷</el-radio-button>
        </el-radio-group>
    </div>
    <!-- <achievement_word_export></achievement_word_export> -->
    <div class="outerBox">
        <div class="sidebar">
            <el-aside>
                <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="sidebar-menu">
                    <el-menu-item index="basic-info">一、课程基本信息</el-menu-item>
                    <el-menu-item index="objectives">二、课程目标及权重确定</el-menu-item>
                    <el-menu-item index="quantitative-analysis">三、达成度定量分析</el-menu-item>
                    <el-menu-item index="summary-improvement">四、总结及改进措施</el-menu-item>
                    <el-menu-item index="evaluation-confirmation">五、评价合理性确认</el-menu-item>
                </el-menu>
            </el-aside>
        </div>
        <!-- 渲染版本 -->
        <div v-if="true" class="content-to-export" direction="vertical">
            <el-header class="headerTest">
                <h1>{{ grade_name }}课程目标达成度评价</h1>
            </el-header>
            <div class="content-to-body">
                <el-card id="basic-info" class="box-card">
                    <div class="card-header">
                        <span>一、课程基本信息</span>
                    </div>
                    <div class="table-container">
                        <el-card class="tableCard">
                            <!-- <el-table class="leftTableOF_tableCard" :show-header=false stripe
                            :data="courseBasicInfo.slice(0, 4)" border>
                            <el-table-column width="180" prop="item">
                            </el-table-column>
                            <el-table-column prop="content">
                            </el-table-column>
                        </el-table> -->
                            <table class="leftTableOF_tableCard" border>
                                <tbody>
                                    <tr v-for="(item, index) in courseBasicInfo.slice(0, 4)  " :key="index">
                                        <th width="180">{{ item.item }}</th>
                                        <td width="180">{{ item.content }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <table class="leftTableOF_tableCard" border>
                                <tbody>
                                    <tr v-for="(item, index) in courseBasicInfo.slice(4, 10)  " :key="index">
                                        <th width="180">{{ item.item }}</th>
                                        <td width="180">{{ item.content }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- <table class="rightTableOF_tableCard" border>
                            <tbody>
                                <tr v-for="(item, index) in courseBasicInfo.slice(4, 10) " :key="index">
                                    <td width="180">{{ item.item }}</td>
                                    <td>{{ item.content }}</td>
                                </tr>
                            </tbody>
                        </table> -->
                        </el-card>
                    </div>
                </el-card>
                <el-card id="objectives" class="box-card avoid-page-break">
                    <div class="card-header">
                        <span>二、课程目标及权重确定</span>
                    </div>
                    <div class="statementBox">
                        <div>
                            根据软件工程专业认证标准要求，该课程的课程目标如下：
                        </div>
                        <ul v-for="item in targetInfo" :key="item.targetName">
                            <li>{{ item.targetName }}:{{ item.targetContent }} </li>
                        </ul>
                    </div>
                    <el-card class="tableCard">
                        <table style="width: 100%">
                            <thead>
                                <tr>
                                    <th style="width: 180px">课程目标</th>
                                    <th style="width: 180px">毕业要求指标点名称</th>
                                    <th style="width: 100px">等级</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(row, index) in tableData" :key="index">
                                    <td>{{ row.targetName }}</td>
                                    <td>{{ row.pointName }}</td>
                                    <td>
                                        <span v-if="row.pointDeep === 'L'" style="color: green">L</span>
                                        <span v-else-if="row.pointDeep === 'M'" style="color: orange">M</span>
                                        <span v-else-if="row.pointDeep === 'H'" style="color: red">H</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-card>
                </el-card>
                <el-card id="quantitative-analysis" class="box-card avoid-page-break">
                    <div class="card-header">
                        <span>三、达成度定量分析</span>
                    </div>
                    <div>
                        <div class="statementBox">
                            该课程总成绩100分，由过程性考核和结果性考核两部分组成。过程性考核占总成绩比例40%，结果性考核占总评成绩的比例为60%，具体见下表考核成绩评定办法。</div>
                        <el-card class="tableCard">
                            <table style="width: 100%; border: 1px solid black;">
                                <thead>
                                    <tr>
                                        <th style="width: 220px;">课程目标</th>
                                        <th style="width: 340px;">支撑环节</th>
                                        <th style="width: 400px;">权重系数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in quantitativeAnalysisData" :key="index">
                                        <td v-if="needRowspan(index)" :rowspan="getRowspan(item.courseObjective)">
                                            {{ item.courseObjective }}
                                        </td>
                                        <td>{{ item.supportLink }}</td>
                                        <td>{{ item.weight }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </el-card>
                    </div>
                    <div class="statementBox">该课程2022级2班学生成绩具体计算详见2202班《数据结构》课程达成度分析成绩成绩表.xls附件文件，主要是学生成绩表。各教学环节达成度计算如下：
                    </div>

                    <div class="supportLink">
                        <span>支撑环节1--课堂表现</span>
                    </div>
                    <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th class="wide">课程目标</th>
                                <th class="wide">总分值</th>
                                <th class="wide">学生平均分</th>
                                <th class="wide">达成度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in classPerformanceData" :key="index">
                                <td>{{ item.courseObjective }}</td>
                                <td>{{ item.totalValue }}</td>
                                <td>{{ item.averageScore }}</td>
                                <td>{{ formatNumber(item.completion)}}</td>
                            </tr>
                        </tbody>
                    </table>


                    <div class="descBox">
                        说明：课堂表现占总成绩的10%，主要是课堂提问。
                    </div>
                    <div class="supportLink">
                        <span>支撑环节2--课程作业</span>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th class="wide">课程目标</th>
                                <!-- <th class="wide">课程作业</th> -->
                                <th class="wide">总分值</th>
                                <th class="wide">学生平均分</th>
                                <th class="wide">达成度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in homeworkPerformanceData" :key="index">
                                <td>{{ item.courseObjective }}</td>
                                <!-- <td>{{ item.supportLink }}</td> -->
                                <td>{{ item.totalValue }}</td>
                                <td>{{ item.averageScore }}</td>
                                <td>{{ formatNumber(item.completion)}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="descBox">
                        说明：课程作业占总成绩的30%，包含4个作业。作业1和2为线性表作业，含顺序存储与链式存储，对应课程目标1；作业3为树作业，对应课程目标2；作业4为图作业，对应课程目标3。
                    </div>
                    <div class="supportLink">
                        <span>支撑环节3--期末考试</span>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th class="wide">课程目标</th>
                                <!-- <th class="wide">题号</th> -->
                                <th class="wide">总分值</th>
                                <th class="wide">学生平均分</th>
                                <th class="wide">达成度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in examPerformanceData" :key="index">
                                <td class="wide">{{ item.courseObjective }}</td>
                                <!-- <td class="wide">{{ item.question }}</td> -->
                                <td class="wide">{{ item.totalValue }}</td>
                                <td class="wide">{{ item.averageScore }}</td>
                                <td class="wide">{{ formatNumber(item.completion)}}</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="descBox">
                        说明：期末考试共3大题，第一题对应课程目标1，第二题对应课程目标2，第三题对应课程目标3。
                    </div>
                    <div class="supportLink">
                        <span>四、课程目标达成度</span>
                    </div>
                    <div style="display: flex;justify-content: center;">
<table>
                        <thead>
                            <tr>
                                <th class="wide">课程目标</th>
                                <th class="wide">支撑环节</th>
                                <th class="wide">达成度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in courseAchievementData" :key="index">
                                <td class="wide">{{ item.courseObjective }}</td>
                                <td>{{ item.supportLinks }}</td>
                                <td class="wide">{{ formatNumber(item.completion)}}</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
                    
                    <div class="descBox">
                        说明：课程目标达成度=课堂表现达成度×0.1+课程作业达成度×0.3+期末考试达成度×0.6。
                    </div>
                </el-card>
                <el-card id="summary-improvement" class="box-card avoid-page-break">
                    <div class="card-header">
                        <span>四、总结及改进措施</span>
                    </div>
                    <table border="1" style="width: 100%">
                        <thead>
                            <tr>
                                <th width="180">项目</th>
                                <th>描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in summaryImprovementData" :key="item.id">
                                <td>{{ item.item }}</td>
                                <td>{{ item.description }}</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- <el-button plain style="margin-top: 10px;" type="primary" @click="saveSummaryImprovement">保存</el-button> -->
                </el-card>
                <el-card id="evaluation-confirmation" class="box-card avoid-page-break">
                    <h3>五、评价合理性确认</h3>
                    <table border style="width: 100%">
                        <thead>
                            <tr>
                                <th rowspan="2">评价责任人</th>
                                <th colspan="3">课程目标达成度评价合理性</th>
                                <th colspan="3">课程质量持续改进措施</th>
                                <th rowspan="2">签字（章）</th>
                            </tr>
                            <tr>
                                <th>合理</th>
                                <th>基本合理</th>
                                <th>不合理</th>
                                <th>可行</th>
                                <th>基本可行</th>
                                <th>不可行</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in evaluationConfirmationData" :key="index">
                                <td>{{ item.role }}</td>
                                <td>{{ item.fullApproval }}</td>
                                <td>{{ item.partialApproval }}</td>
                                <td>{{ item.noApproval }}</td>
                                <td>{{ item.fullDisapproval }}</td>
                                <td>{{ item.partialDisapproval }}</td>
                                <td>{{ item.noDisapproval }}</td>
                                <td>
                                    <!-- Placeholder for signature -->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-card>
            </div>
        </div>
        <!-- 导出版本 -->
        <div style="display: none" class="content-to-export_1" direction="vertical">
            <el-header class="headerTest">
                <!-- <h1>{{ grade_name }}课程目标达成度评价</h1> -->
                <h3 style="text-align: center;">{{ grade_name }}课程目标达成度评价</h3>
            </el-header>
            <!-- <div class="multi-column-table">
                <div class="column">
                    <table class="styled-table">
                        <tr>
                            <th>学科/学分</th>
                            <td>85/4</td>
                        </tr>
                        <tr>
                            <th>课程名称</th>
                            <td>数据库原理</td>
                        </tr>
                        <tr>
                            <th>教授姓名</th>
                            <td>李教授</td>
                        </tr>
                        <tr>
                            <th>开课学期</th>
                            <td>一年/夏季</td>
                        </tr>
                        <tr>
                            <th>课程性质</th>
                            <td>必修</td>
                        </tr>
                    </table>
                </div>
                <div class="column">
                    <table class="styled-table">
                        <tr>
                            <th>授课人数</th>
                            <td>64</td>
                        </tr>
                        <tr>
                            <th>课程编号</th>
                            <td>计算机2202</td>
                        </tr>
                        <tr>
                            <th>评价方法</th>
                            <td>报告/考试</td>
                        </tr>
                        <tr>
                            <th>评价方法（样本）</th>
                            <td>报告书（软件）</td>
                        </tr>
                    </table>
                </div>
            </div> -->
            <el-card id="basic-info" class="box-card">
                <h3>一、课程基本信息</h3>
                <div class="table-container">
                    <el-card class="tableCard">
                        <table class="leftTableOF_tableCard" border>
                            <tbody>
                                <tr v-for="(item, index) in courseBasicInfo " :key="index">
                                    <th width="180">{{ item.item }}</th>
                                    <td width="180" style="text-align: center;">{{ item.content }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </el-card>
                </div>
            </el-card>
            <el-card id="objectives" class="box-card avoid-page-break">
                <h3>二、课程目标及权重确定</h3>
                <div class="statementBox">
                    <div>
                        根据软件工程专业认证标准要求，该课程的课程目标如下：
                    </div>
                    <ul v-for="item in targetInfo" :key="item.targetName">
                        <li> <span>{{ item.targetName }}</span> : {{ item.targetContent }} </li>
                    </ul>
                </div>
                <el-card class="tableCard">
                    <h4 style="text-align: center;">课程目标与毕业要求的关系图</h4>
                    <table style="width: 100%">
                        <thead>
                            <tr>
                                <th style="width: 180px">课程目标</th>
                                <th style="width: 180px">毕业要求指标点名称</th>
                                <th style="width: 100px">等级</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(row, index) in tableData" :key="index">
                                <td>{{ row.targetName }}</td>
                                <td>{{ row.pointName }}</td>
                                <td>
                                    <span v-if="row.pointDeep === 'L'" style="color: green">L</span>
                                    <span v-else-if="row.pointDeep === 'M'" style="color: orange">M</span>
                                    <span v-else-if="row.pointDeep === 'H'" style="color: red">H</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-card>
            </el-card>
            <el-card id="quantitative-analysis" class="box-card avoid-page-break">
                <h3>三、达成度定量分析</h3>
                <div>
                    <div class="statementBox">
                        该课程总成绩100分，由过程性考核和结果性考核两部分组成。过程性考核占总成绩比例40%，结果性考核占总评成绩的比例为60%，具体见下表考核成绩评定办法。
                    </div>
                    <h4 style="text-align: center;">《数据结构》考核成绩评定方法</h4>

                    <el-card class="tableCard">
                        <table style="width: 100%; border: 1px solid black;">
                            <thead>
                                <tr>
                                    <th style="width: 220px;">课程目标</th>
                                    <th style="width: 340px;">支撑环节</th>
                                    <th style="width: 400px;">权重系数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in quantitativeAnalysisData" :key="index">
                                    <td v-if="needRowspan(index)" :rowspan="getRowspan(item.courseObjective)">
                                        {{ item.courseObjective }}
                                    </td>
                                    <td>{{ item.supportLink }}</td>
                                    <td>{{ item.weight }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </el-card>
                </div>
                <div class="statementBox">该课程2022级2班学生成绩具体计算详见2202班《数据结构》课程达成度分析成绩成绩表.xls附件文件，主要是学生成绩表。各教学环节达成度计算如下：
                </div>

                <div class="supportLink">
                    <span>(一)、支撑环节1--课堂表现</span>
                </div>
                <table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th class="wide">课程目标</th>
                            <th class="wide">总分值</th>
                            <th class="wide">学生平均分</th>
                            <th class="wide">达成度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in classPerformanceData" :key="index">
                            <td>{{ item.courseObjective }}</td>
                            <td>{{ item.totalValue }}</td>
                            <td>{{ item.averageScore }}</td>
                            <td>{{ formatNumber(item.completion) }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="descBox">
                    说明：课堂表现占总成绩的10%，主要是课堂提问。
                </div>
                <div class="supportLink">
                    <span>(二)、支撑环节2--课程作业</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th class="wide">课程目标</th>
                            <!-- <th class="wide">课程作业</th> -->
                            <th class="wide">总分值</th>
                            <th class="wide">学生平均分</th>
                            <th class="wide">达成度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in homeworkPerformanceData" :key="index">
                            <td>{{ item.courseObjective }}</td>
                            <!-- <td>{{ item.supportLink }}</td> -->
                            <td>{{ item.totalValue }}</td>
                            <td>{{ item.averageScore }}</td>
                            <td>{{ formatNumber(item.completion) }}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="descBox">
                    说明：课程作业占总成绩的30%，包含4个作业。作业1和2为线性表作业，含顺序存储与链式存储，对应课程目标1；作业3为树作业，对应课程目标2；作业4为图作业，对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>(三)、支撑环节3--期末考试</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th class="wide">课程目标</th>
                            <!-- <th class="wide">题号</th> -->
                            <th class="wide">总分值</th>
                            <th class="wide">学生平均分</th>
                            <th class="wide">达成度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in examPerformanceData" :key="index">
                            <td class="wide">{{ item.courseObjective }}</td>
                            <!-- <td class="wide">{{ item.question }}</td> -->
                            <td class="wide">{{ item.totalValue }}</td>
                            <td class="wide">{{ item.averageScore }}</td>
                            <td class="wide">{{ formatNumber(item.completion) }}</td>
                        </tr>
                    </tbody>
                </table>

                <div class="descBox">
                    说明：期末考试共3大题，第一题对应课程目标1，第二题对应课程目标2，第三题对应课程目标3。
                </div>
                <div class="supportLink">
                    <span>(四)、课程目标达成度</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th class="wide">课程目标</th>
                            <th class="wide">支撑环节</th>
                            <th class="wide">达成度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in courseAchievementData" :key="index">
                            <td class="wide">{{ item.courseObjective }}</td>
                            <td>{{ item.supportLinks }}</td>
                            <td class="wide">{{ formatNumber(item.completion)}}</td>

                        </tr>
                    </tbody>
                </table>
                <div class="descBox">
                    说明：课程目标达成度=课堂表现达成度×0.1+课程作业达成度×0.3+期末考试达成度×0.6。
                </div>
            </el-card>
            <el-card id="summary-improvement" class="box-card avoid-page-break">
                <h3>四、总结及改进措施</h3>
                <table border="1" style="width: 100%">
                    <thead>
                        <tr>
                            <th width="180">项目</th>
                            <th>描述</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in summaryImprovementData" :key="item.id">
                            <td>{{ item.item }}</td>
                            <td>{{ item.description }}</td>
                        </tr>
                    </tbody>
                </table>

                <!-- <el-button plain style="margin-top: 10px;" type="primary" @click="saveSummaryImprovement">保存</el-button> -->
            </el-card>
            <el-card id="evaluation-confirmation" class="box-card avoid-page-break">
                <h3>五、评价合理性确认</h3>
                <table border style="width: 100%">
                    <thead>
                        <tr>
                            <th rowspan="2">评价责任人</th>
                            <th colspan="3">课程目标达成度评价合理性</th>
                            <th colspan="3">课程质量持续改进措施</th>
                            <th rowspan="2">签字（章）</th>
                        </tr>
                        <tr>
                            <th>合理</th>
                            <th>基本合理</th>
                            <th>不合理</th>
                            <th>可行</th>
                            <th>基本可行</th>
                            <th>不可行</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in evaluationConfirmationData" :key="index">
                            <td>{{ item.role }}</td>
                            <td>{{ item.fullApproval }}</td>
                            <td>{{ item.partialApproval }}</td>
                            <td>{{ item.noApproval }}</td>
                            <td>{{ item.fullDisapproval }}</td>
                            <td>{{ item.partialDisapproval }}</td>
                            <td>{{ item.noDisapproval }}</td>
                            <td>
                                <!-- Placeholder for signature -->
                            </td>
                        </tr>
                    </tbody>
                </table>





            </el-card>
        </div>
    </div>
</template>
<style scoped>
        .multi-column-table {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }
    
        .column {
            border: 1px solid #dddddd;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
            margin-right: 16px;
        }
    
        .styled-table {
            border-collapse: collapse;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 200px;
        }
    
        .styled-table th,
        .styled-table td {
            padding: 12px 15px;
            border: 1px solid #dddddd;
        }
    
        .styled-table th {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }
</style>
<script setup>
import { ref, onMounted, nextTick } from 'vue';
// import export_word from './export_word'
import { getAnalysis_data } from '@/api/target_item_info_input'
// import export_word from './export_word.vue'
import eventBus from '/eventBus'
import achievement_word_export from '@/components/achievement_word_export.vue'
// 激活的菜单项，默认为第一个
const activeMenu = ref('basic-info');
import html2pdf from 'html2pdf.js'
import $ from 'jquery'
import '@/utils/jqureyWordExport'
const exportTo_j_word=()=>{
    let date = new Date().toLocaleDateString()
    let docx = `${grade_name}课程达成度分析`
    $(".content-to-export_1").wordExport(docx);

}
function getRowspan(courseObjective) {
    return quantitativeAnalysisData.value.filter(item => item.courseObjective === courseObjective).length;
}
function needRowspan(index) {
    if (index === 0) return true;
    return quantitativeAnalysisData.value[index].courseObjective !== quantitativeAnalysisData.value[index - 1].courseObjective;
}
const tableData = ref([]);

const targetInfo=ref([])

const courseAchievementData = ref([]);

const examPerformanceData = ref([]);

const classPerformanceData = ref([]);
const homeworkPerformanceData = ref([]);
const courseBasicInfo = ref([]);
const quantitativeAnalysisData = ref([])
import { useClassStore } from '@/stores/modules/class'
const classStore = useClassStore()
const grade_name = classStore.classInfo.grade_name
const acs_id = classStore.classInfo.user_and_acs_id
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const subId = parseInt(route.params.subId)
const evaluationConfirmationData = ref([
    { role: '评价组/系主任', fullApproval: '', partialApproval: '', noApproval: '', fullDisapproval: '', partialDisapproval: ''},
    { role: '教学副院长', fullApproval: '', partialApproval: '', noApproval: '', fullDisapproval: '', partialDisapproval: '' }
]);
const summaryImprovementData = ref([
    { item: '对上一轮教学的改进', description: '' },
    { item: '本轮达成度结果分析评价', description:''},
    { item: '持续改进方案（包括教学内容、教学方法及考核方式等）', description:''},
    { item: '课程评价人', description: '' },
    { item: '评价时间', description: '' }
]);
const currentPaper = ref('A')
const formatNumber = (value) => {
    if (value === undefined || value === null) {
        return ''
    }
    return value.toFixed(2)
}
const fetchData = async () => {
    const DataToSubmit = eventBus.state.DataToSubmit
    const studentCount = eventBus.state.studentCount
    const submitOBJ = {
        DataToSubmit,
        studentCount
    }
    const res = await getAnalysis_data(subId, acs_id, currentPaper.value, submitOBJ)
    console.log("res", res.data.content);
    courseBasicInfo.value = res.data.content.returnClassMes

    targetInfo.value = res.data.content.returnTarget// 课程目标信息

    tableData.value = res.data.content.returnTargetPoint
    quantitativeAnalysisData.value = res.data.content.returnAssessment
    // 支撑环节123
    classPerformanceData.value = res.data.content.returnnewArray
    homeworkPerformanceData.value = res.data.content.returnTaskMes
    examPerformanceData.value = res.data.content.returnCorseMes
    // 支撑环节123

    courseAchievementData.value = res.data.content.returnTargetAchievement
}
// 组件挂载后添加滚动监听器
onMounted(() => {
    fetchData()
    const container = document.querySelector('.content-to-export');
    container.addEventListener('scroll', updateSidebarHighlight);
});
const exportToPDF = () => {
    const element = document.querySelector('.content-to-export');
    const options = {
        margin: [10, 5, 10, 5],
        filename: 'exported-file.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 3, pagebreak: { mode: 'avoid-all', before: '.avoid-page-break', after: '.avoid-page-break' } },
        // jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
        jsPDF: { unit: 'mm', format: 'a0', orientation: 'portrait' }
    };

    html2pdf().from(element).set(options).save();
}

// const tableRowClassName = ({row,rowIndex}) => {
//     if (rowIndex % 2 === 0) {
//         return { backgroundColor: '#fdf6ec' };
//     } else {
//         return { backgroundColor: '#f0f9eb' };
//     }
// }
// 处理菜单项选择事件
const handleMenuSelect = (index) => {
    // 更新激活的菜单项
    activeMenu.value = index;
    // 滚动到相应的内容区域
    scrollToSection(index);
};

// 滚动到指定的内容区域
const scrollToSection = (sectionId) => {
    console.log("sectionId",sectionId);
    const section = document.getElementById(sectionId);
    const container = document.querySelector('.content-to-body');
    if (section && container) {

        // 计算目标元素的顶部相对于容器顶部的位置
        let sectionTop = section.offsetTop;
        console.log("123");

        // 循环遍历，累加所有父元素的offsetTop值，直到达到container
        let parent = section.offsetParent;
        console.log("parent", parent);
        while (parent !== container && parent !== null) {
            console.log("324");

            sectionTop += parent.offsetTop;
            parent = parent.offsetParent;
        }

        // 使用容器的 scrollTo 方法实现平滑滚动
        container.scrollTo({
            top: sectionTop - container.offsetTop,
            behavior: 'smooth'
        });
    }
};



const updateSidebarHighlight = () => {
    const container = document.querySelector('.content-to-export');
    const sections = document.querySelectorAll('.content-to-export > .box-card');
    // console.log("container,sections", container, sections);
    let currentActive = null;
    let minDistance = Infinity;
    sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();
        const topDistance = Math.abs(rect.top - containerRect.top);

        // 查找与容器顶部距离最近的章节
        if (topDistance < minDistance) {
            minDistance = topDistance;
            currentActive = section.id;
        }
    });
    if (currentActive) {
        activeMenu.value = currentActive;
    }
};
</script>
<style scoped lang="scss">
$active-gradient: linear-gradient(to right, #60a5fa, #d9e8fc); // 激活状态的渐变色
$inactive-gradient: linear-gradient(to right, #f4ece8, #898485); // 非激活状态的渐变色
$underline-height: 2px; // 下划线的高度
$underline-offset: 10px; // 下划线与文字的间距
// 定义一个mixin用于渐变背景
@mixin gradient-bg($startColor, $endColor) {
    background: $startColor; // 老的浏览器兼容
    background: linear-gradient(to right, $startColor, $endColor);
}
$inactive-gradient-start: #60a5fa; // 非激活状态的开始颜色
$inactive-gradient-end: #378CE7; // 非激活状态的结束颜色
$active-gradient-start: #005eff; // 激活状态的开始颜色
$active-gradient-end: #0a5ff2; // 激活状态的结束颜色
@media print {
    .avoid-page-break {
        page-break-inside: avoid !important;
    }
}
         table {
            border-collapse: collapse;
                margin: 25px 0;
                font-size: 0.9em;
                font-family: sans-serif;
                min-width: 400px;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
         }
    
        th,
        td {
            // border: 1px solid black;
            // padding: 8px;
            text-align:center;
            padding: 12px 15px;
            border: 1px solid #dddddd;
        }
        th{
            background-color: #009879;
            color: #ffffff;
        }
        tr:hover {
            background-color: #f3f3f3;
        }
         .wide {
             width: 320px;
         }
.selectBox{
    display: flex;
    // justify-content: center;
    // flex-direction: column;
        margin-bottom: 20px;
    .bt_in_selectBox{
        width: 120px;
    }
    .radio_group_in_selectBox{
        margin-left: 20px;
    }
}
.outerBox {
    // box-sizing: border-box;
    display: flex;
    // width: 100%;
    // width: 1425px;
    // border: 1px solid rgb(208, 199, 201);
    border-radius: 10px;
    box-shadow: 1px -8px 11px 1px rgba(0, 0, 0, 0.1);
    // background-color: #f4f4fc;
    .sidebar {
            /* 隐藏横向滚动条 */
            background: linear-gradient(to bottom right, #DFF5FF, rgb(201 104 30 / 0%));
            backdrop-filter: blur(5px);
            // width: 20%;
            width: 13%;
            padding: 0;
            position: fixed;
            top:185px;
            bottom: 0;
            padding:10px;   
            .el-aside{
                width: 100%;
            }
        .sidebar-menu {
                    box-sizing: border-box;
                    // padding: 20px;
                    // width: 304px;
                    width: 100%;
                    // margin: 30px 0 0 -11px;11111111111111111111111
                    margin: 0px 0 0 -11px;
                    border-radius: 10px;
                    // overflow-x: hidden;
                    background-color: transparent;
                    overflow:hidden;
                    margin:0 auto;
                    border:none;
                // 应用渐变背景
                // @include gradient-bg(#f4ece8, #898485);
            // border: 5px solid rgb(208, 199, 201);
                .el-menu-item {
                    color: #496773;
                    // padding: 30px;
                    font-size: 12px;
                    // position: relative; // 为伪元素定位做准备
                    height:40px;
                    margin-bottom: $underline-offset; // 为下划线留出空间
                    &:not(.is-active)::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height;
                            background: linear-gradient(to right, $inactive-gradient-end, transparent); // 从粗到细的渐变效果
                            border-radius: 1px;
                    }
        
                    &.is-active::after {
                        content: '';
                            position: absolute;
                            bottom: -$underline-height;
                            left: 0;
                            right: 0;
                            height: $underline-height + 1px;
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 激活状态也应用渐变
                            border-radius: 1px;
                    }
                    &:hover {
                        background-color: #d9e8fc9c; // 鼠标悬停时的背景色
                        &::after {
                            background: linear-gradient(to right, $active-gradient-end, transparent); // 保持渐变效果
                        }
                    }
                }
            }
    }

    .content-to-export {
        // border: 3px solid pink;
        // width: 80%;
        // overflow-y: auto;
        /* 允许垂直方向上的滚动 */
        // overflow-x: hidden;
        // height: 100vh;
        /* 或者根据您的布局需求设定固定高度 */
        // flex: 1;
        // margin-left: 25px;
        flex: 1;
        // margin-left: 10px;
        // width:68%;
        // position: fixed;
        // top: 125px;
        // right: 0;
        // bottom: 0;
        // overflow: scroll;
        &::-webkit-scrollbar {
                width: 10px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: #60a5fa87;
            /* 设置滚动条滑块颜色 */
            border-radius: 10px;
            /* 设置滚动条滑块圆角 */
        }
        // background-color: #e4a2a2;
        // margin-left: 150px;
        .headerTest{
            // width: 1022px;
            width: 100%;
            background-color: #d9e8fc;
            color: #64748b;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            // font-size: global-font-size;
            font-family: Arial, sans-serif;
            border-radius: 5px;
            // border-left: 5px solid #60a5fa;
            border-top: none;
            border-right: none;
            border-bottom: none;
            margin-bottom: 10px;
            margin-right: 10px;
            justify-content: center;
        }
        .box-card {
            box-sizing: border-box;
            margin-left: -10px;
            margin-bottom: 8px;
            padding: 10px;
            width: 100%;
            .card-header {
                font-size:16px;
                h4{
                    font-size:20px
                }
            }
                .tableCard{
                background-color: #f4f4fc;
                // padding-bottom: 20px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                .leftTableOF_tableCard{
                    width: 50%;
                    float: left;
                    border:1px solid black;
                    border-collapse: collapse;
                    border-right: none;
                    margin-bottom: 20px;
                    // ::v-deep .el-table {
                    //         .el-table-column {
                    //             border-right: 2px solid #0a5ff2; 
                    //             &:last-child {
                    //                 border-right: none;
                    //             }
                    //         }
                    // }
                }
                // .rightTableOF_tableCard{
                //     width: 50%;
                //     border-collapse: collapse;
                //     float: left;
                //     border:2px solid #e7dede;
                //     border-left: none;
                // }
            }
            .card-header {
                border-bottom: 2px dashed #ccc;
                margin-bottom: 14px;
                padding-bottom: 10px;
                span{
                    font-weight: bold;
                    font-size: 16px;
                }
            }
            .statementBox{
                // color: rgb(235, 200, 200);
                letter-spacing: 2px;
                font-size: 13px;
                padding: 10px;
                ol{
                    li{
                        padding: 10px;
                    }
                }
            }
            .descBox{
                color: #ccc;
                font-size: 12px;
                padding: 10px 0px;
            }
            .supportLink{
                padding: 10px;
                font-size: 14px;
            }
        }
    }
    .content-to-body{
        flex: 1;
        margin-left: 10px;
        width:68%;
        position: fixed;
        top: 185px;
        right: 0;
        bottom: 0;
        overflow: scroll;
        overflow-x: hidden;
    }
}

.diagonal-split-header {
    position: relative;
    height: 60px;
}

.text-part {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diagonal-line {
    position: absolute;
    width: 200%;
    top: -48px;
    left: 9px;
    height: 100px;
    background: transparent;
    transform: rotate(-152deg);
    border-top: 1px solid #807878;
}

</style>
